<template>
  <!-- 多柱状图 -->
  <div ref="echarts"
       id="mains">
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {

    }
  },
  methods: {
    init () {
      // var chartDom = document.getElementById('mains');
      // var myChart = echarts.init(chartDom);
      // var option;
      var myChart = echarts.init(this.$refs.echarts);

      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['2017年', '2018年', '2019年', '2020年', '2021年'],

        },
        legend: {
          bottom: '20',
          // textStyle: {
          //   color: 'rgba(172, 254, 255, 1)'
          // },
        },
        // tooltip: {
        //   trigger: 'axis',
        //   backgroundColor: 'rgba(24,48,72,0.6)',
        //   borderWidth: 0,
        //   axisPointer: {
        //     type: 'shadow'
        //   },
        //   textStyle: {
        //     color: 'white' // 设置文字颜色
        //   }
        // },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 20,
          name: '单位: 亿元'
        },
        series: [
          {
            name: '家庭农场',
            data: [20, 32, 91, 34, 90,],
            type: 'bar',
            smooth: true,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(49, 222, 155, 1)' // 柱状图颜色
                  }
                ]),
                barBorderRadius: [2, 2, 0, 0] //圆角大小
              }
            }
          },
          {
            name: '合作社',
            data: [30, 62, 11, 24, 60,],
            type: 'bar',
            smooth: true,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(190, 85, 225, 1)' // 柱状图颜色
                  }
                ]),
                barBorderRadius: [2, 2, 0, 0] //圆角大小
              }
            }
          },
          {
            name: '农业企业',
            data: [40, 22, 31, 54, 10,],
            type: 'bar',
            smooth: true,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(245, 110, 106, 1)' // 柱状图颜色
                  }
                ]),
                barBorderRadius: [2, 2, 0, 0] //圆角大小
              }
            }
          },
        ]
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // option && myChart.setOption(option);
    }
  },
  created () {

  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
#mains {
  width: 100%;
  height: 100%;
}
</style>
